<template>
    <div id="warehouse-list">
        <el-card >
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input size="mini" placeholder="输入仓库名称查询" clearable @change="handleChangeSearch"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-select class="select-prefix" size="mini" v-model="type" @change="handleChangeSearch" placeholder="请选则仓库类型" clearable filterable>
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>仓库类型</span>
                            </template>
                            <el-option
                                v-for="item in typeOpions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option> 
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content col_float_right">
                       <el-button size="mini" type="primary" @click="createWarehouse">新建仓库</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="仓库名称" prop="warehouseName" show-overflow-tooltip></el-table-column>
                <el-table-column label="仓库类型" prop="warehouseType" width="100">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.warehouseType == 1 ? 'success' : 'danger'">
                            {{scope.row.warehouseType == 1 ? '存储仓' : '门店仓'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="联系人" prop="personName" show-overflow-tooltip></el-table-column>
                <el-table-column label="联系电话" prop="mobileNumber" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="门店编号" prop="storeNo"></el-table-column> -->
                <!-- <el-table-column label="仓库分级" prop="warehouseLevel"></el-table-column> -->
                <el-table-column label="外部仓库ID" prop="outerWhId" ></el-table-column>
                <el-table-column label="外部仓库名称" prop="outerWhName" show-overflow-tooltip></el-table-column>
                <el-table-column label="是/否虚拟仓" prop="isVirtual" width="100">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.isVirtual == 1 ? 'success' : 'danger'">
                            {{scope.row.isVirtual == 1 ? '是' : '否'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="仓库状态" prop="isLocked" width="100">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.isLocked == 1 ? 'danger' : 'success'">
                            {{scope.row.isLocked == 1 ? '禁用' : '启用'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="gmtCreate" show-overflow-tooltip width="120"></el-table-column>
                <!-- <el-table-column label="修改时间" prop="gmtModified" show-overflow-tooltip></el-table-column> -->
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                            <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item  command="a" @click.native="handleEdit(scope.row)">编辑</el-dropdown-item>
                                <el-dropdown-item  command="b" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <warehouseTpl v-if="isShow" :type= "tplType" :id="warehouseId" :isShow="isShow" @cancelShow="cancelShow" @getWarehouseList="getWarehouseList"></warehouseTpl>
    </div>
</template>
<script>
import page from '../../commonComponents/page'
import warehouseTpl from './warehouseTpl'
export default {
    components: {page, warehouseTpl},
    data() {
        return {
            page: 1,
            size: 10,
            total: 0,
            level: 1,
            name: '',
            type: '',
            typeOpions: [
                {
                    value: 0,
                    label: '门店仓'
                },
                {
                    value: 1,
                    label: '存储仓'
                }
            ],
            tableData: null,
            isShow: false,
            tplType: 'add',
            warehouseId: ''
        }
    },
    mounted() {
        this.getWarehouseList()
    },
    methods: {
        getWarehouseList() {
            let params= {
                page: this.page,
                size: this.size,
                level: this.level,
                name: this.name,
                type: this.type
            }
            this.$server.storeWarehouseController.getWarehouseList(params).then(res => {
                this.tableData= res.data
                this.total= res.total
            })
            
        },
        /**查询 */
        handleChangeSearch() {
            this.total= 0
            this.page= 1
            this.getWarehouseList()
        },
        handlePageChange(val) {
            this.page= val
            this.getWarehouseList()
        },
        handleSizeChange(val) {
            this.size= val
            this.getWarehouseList()
        },
        /**编辑仓库 */
        handleEdit(scope) {
            this.tplType= 'edit'
            this.isShow= true
            this.warehouseId= scope.warehouseId
        },
        /**停用/启用仓库 */
        handleStopOrStart(scope) {},
    
        cancelShow(val) {
            this.isShow= val
        },
        /**新建仓库 */
        createWarehouse() {
            this.tplType= 'add'
            this.isShow= true
        },
        /**删除仓库 */
        handleDelete(scope) {
            this.$server.storeWarehouseController.deleteWarehouse(scope.warehouseId).then(res => {
                this.getWarehouseList()
            })
        }

    }
}
</script>